<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>解决方案</title>
	<link rel="stylesheet" href="css/solve.css">
	<link rel="stylesheet" href="font_2234222_8n5f3cu5q0b/iconfont.css">
</head>
<body>
	<nav>
		<div class="nav-con">
			<div class="nav-log"></div>
			<ul class="text">
				<li><a href="index.html">网站首页</a></li>
				<li><a href="#">传悦资源</a></li>
				<li><a href="demo.html">传悦案例</a></li>
				<li class="now"><a href="#">解决方案</a></li>
				<li><a href="#">需求提交</a></li>
			</ul>
			<ul class="icon">
				<li><span class="iconfont icon-dianhua">0535-60652189</span></li>
				<li><span class="iconfont icon-qq"></span></li>
				<li><span class="iconfont icon-xinlang"></span></li>
				<li><span class="iconfont icon-youxiang"></span></li>
				<li><span class="iconfont icon-youxiang1"></span></li>
			</ul>
		</div>
	</nav>
	<section>
		<div class="bot">
			<div class="bot-con">
				网站资源 > 传悦观点
			</div>
		</div>
	</section>
	<main>
		<div class="main-con">
			<ul class="list">
				<div class="logo">
					<span>新</span>
				</div>
				
			</ul>
			<li id="template">
				<a href="solve_content.html">
					<div class="data">
						<span>2013-09</span>
						<p>27</p>
					</div>
					<div class="text">
						<div class="img">
							<img src="" alt="">
						</div>
						<div class="content">
							<h5></h5>
							<p class="p1">
								<b>标签:&nbsp;&nbsp;&nbsp;</b><span></span>
							</p>
							<p class="p2">
							</p>
						</div>
					</div>
				</a>
			</li>
			<ul class="num">
				<li><</li>
				<li>1</li>
				<li class="now">2</li>
				<li>3</li>
				<li>4</li>
				<li>></li>
			</ul>
		</div>
	</main>
	<footer>
		<div class="foot-con">
			<ul>
				<li>关于传悦</li>
				<li>新闻动态</li>
				<li>传悦观点</li>
				<li>加入传悦</li>
				<li>联系传悦</li>
				<li>付款账户</li>
			</ul>
			<p>Copyright &copy;2013 创梦网络科技有限责任公司 || 传悦 Chnyoo.cn All Right Reserved 京ICP备12005221号</p>
		</div>
	</footer>



	<script>
		let template = document.querySelector("#template");
		let list = document.querySelector(".list");

		let http = new XMLHttpRequest();
		http.open("get","http://10.35.164.241:81/solveItem");
		http.send();
		http.onreadystatechange = function(){
			if (http.readyState === 4) {
				let ItemList = JSON.parse(http.responseText);
				ItemList.forEach(function(item,index){
					let nowItem = template.cloneNode(true);
					nowItem.id = "";
					list.appendChild(nowItem);
					nowItem.querySelector(".img img").setAttribute("src",`img/img/${item.src}`);
					nowItem.querySelector(".content h5").innerHTML = item.title;
					nowItem.querySelector(".p1 span").innerHTML = item.label;
					nowItem.querySelector(".p2").innerHTML = item.text;
					nowItem.setAttribute("data-id",item.id);

					nowItem.onclick = function(){
						let id = nowItem.getAttribute("data-id");
						let http = new XMLHttpRequest();
						http.open("get",`http://10.35.164.241:81/content?id=${id}`);
						http.send();
						http.onreadystatechange = function(){
							if(http.readyState === 4){
								console.log(id);
							}
						}
					}
				})
			}
		}
		
	</script>
</body>
</html>
